<template>
    <div class="">
        <CommonTitle class="m-t20" titleName="正式项目流程图">
            <template #rightCnBox>
                <div class="d-flex a-center j-sb" style="width: 90%;">
                    <span class="title m-l20">项目名称: {{ projectName }}</span>
                    <div class="status-wrap d-flex">
                        <div class="status-item d-flex a-center j-center m-r30" v-for="(item,index) in state.statusList" :key="index">
                            <div class="status-icon m-r5" :style="{backgroundColor:item.color}"></div>
                            <span class="status-tip">{{item.title}}</span>
                        </div>
                    </div>
                </div>
            </template>
        </CommonTitle>
        <div class="content m-t20 d-flex" v-if="state.stageList.length!==0">
            <div class="left-wrap">
                <div class="stage-name d-flex a-center j-center">
                    <span>项目阶段</span>
                </div>
                <div class="tree-wrap">
                    <el-tree
                        @node-click="nodeClick"
                        :data="state.stageList"
                        :props="defaultProps" />
                </div>
            </div>
            <el-main  v-loading="isLoading"
                      element-loading-text="数据加载中……"
                      style="padding: 0 !important;"
            >
                <div class="right-wrap d-flex flex-column" v-if="state.stageList.length!==0">
                    <div class="stage-info-wrap m-b10">
                        <div>
                            <svg-icon icon-class="state-icon" class="state-icon"></svg-icon>
                            <span class="m-l5">{{state.taskInfo.stageName}}</span>
                        </div>
                        <div class="task-info-wrap d-flex m-t10 m-b10">
                            <div class="d-flex a-center">
                                <svg-icon icon-class="stage-estimated-time" class="stage-estimated-time"></svg-icon>
                                <span class="m-l5 title">预计完成时间: {{state.taskInfo.predictStartTime || '0000-00-00 00:00:00'}}至{{state.taskInfo.predictEndTime || '0000-00-00 00:00:00'}}</span>
                            </div>
                            <div class="line"></div>
                            <div class="d-flex a-center">
                                <svg-icon icon-class="stage-be-overdue" class="stage-be-overdue"></svg-icon>
                                <span class="m-l5 be-overdue-title">逾期任务: {{state.taskInfo.exceedTaskNum || 0}}</span>
                            </div>
                            <div class="line"></div>
                            <div class="d-flex a-center">
                                <svg-icon icon-class="stage-proportion" class="stage-proportion"></svg-icon>
                                <span class="m-l5 title">完成任务比例: {{state.taskInfo.totalTaskNum+'/'+state.taskInfo.completeTaskNum}}</span>
                            </div>
                            <div class="line"></div>
                            <div class="d-flex a-center">
                                <svg-icon icon-class="stage-time" class="stage-time"></svg-icon>
                                <span class="m-l5 title">实际完成时间: {{state.taskInfo.realEndTime || '0000-00-00 00:00:00'}}</span>
                            </div>
                        </div>
                    </div>
                    <gantt v-if="ganttTasks.data.length!==0" :tasks="ganttTasks" :columns="ganttColumns" style="height: 500px;"></gantt>
                    <el-empty v-else description="暂无任务数据"></el-empty>
                </div>
            </el-main>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
    </div>
</template>

<script setup>
import {reactive, onMounted, ref} from 'vue'
import CommonTitle from '@/components/CommonTitle.vue'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'
import { useRouter, useRoute } from 'vue-router'
import {darkLine, projectConfigApi, projectTask} from '@/api/project'
import {ElTree,ElMain,ElEmpty} from "element-plus";
import Gantt from "../components/gantt.vue";
import {computer_days, GetDateDiff} from "@/common/utils/GlobalUtils";
import SvgIcon from "@/components/SvgIcon/index.vue";

const isLoading = ref(false);

const defaultProps = {
    children: 'children',
    label: 'stageName',
}

//路由跳转
let router = useRouter()
let route = useRoute()
const props = defineProps({
    projectId: {
        type: String,
        default: ''
    },
    projectName: {
        type: String,
        default: ''
    },
    projectType: {
        type: String,
        default: ''
    }
})
const state = reactive({
    stageList: [],
    taskList:[],
    stageInfo:{},
    taskInfo:{},
    statusList:{
          '-1':{
                title:'未开始',
                color:'#9d9ca5'
            },
        '1':{
                title:'进行中',
                color:'rgba(252, 112, 43)'
           },
        '2':{
                title:'已完成',
                color:'#95b782'
            },
        '3':{
                title:'逾期完成',
                color:'#d886ba'
            },
        '4':{
                title:'逾期未完成',
                color:'#f21d2e'
            },
    }
});

const ganttTasks = reactive({
    data: [
        // { id: 1, text: '进行中', start_date: '2020-01-17', end_date: '2020-01-19', duration: 3, progress: 1,color:'red' },
        // { id: 2, text: '未开始', start_date: '2020-01-20', end_date: '2020-01-25', duration: 3, progress: 2,color:'#ccc' }
    ]
})
const ganttColumns = ref([
    { align: "center", name: 'taskName', label: '任务名称' },
    { align: "center", name: 'num', label: '实施流程节点' },
    { align: "center", name: 'realEndTime', label: '实际完成时间',width: "*"  },
])

/**
 * 获取任务
 * @param projectStageId
 * @param callback
 * @param err_callback
 */
const getTask = (projectStageId,callback,err_callback) => {
    darkLine.getStage({projectStageId:projectStageId}).then((res) => {
        if (res.code === '200') {
            if(callback)callback(res);
            state.taskInfo = res.data;
            if(res.data.tasks.length!==0){
                ganttTasks.data = res.data.tasks.map(item=>{
                    let params =  {
                        id:item.projectTaskId,
                        text: '',
                        taskName:item.taskName,
                        start_date: new Date(item.planStartTime),
                        end_date: new Date(item.planEndTime),
                        duration: GetDateDiff(item.planStartTime, item.planEndTime) + 1,
                        progress: 1,
                        color:state.statusList[item.status].color,
                        num:item.completeItemNum+'/'+item.totalItemNum,
                        realEndTime:item.realEndTime || '-',
                    }
                    if(item.status === 3 || item.status === 4){
                        params.text = state.statusList[item.status].title + `: ${computer_days(new Date(item.realEndTime || item.planEndTime),new Date())}天`
                    }else{
                        params.text = state.statusList[item.status].title;
                    }
                    return params;
                });
            }

        }else{
            if(err_callback)err_callback(res);
        }
    })
}
const handel = () => {}

/**
 * 查阶段
 */
const getStageDetail = () => {
    let projectId = props.projectId || getURLhandler(route.path).projectId;
    darkLine.getStageDetail({projectId:projectId || ''}).then((res) => {
        if (res.code === '200') {
            if(res.data.stageVo.stages.length!==0){
                state.stageList =  res.data.stageVo.stages;
                state.stageInfo = res.data.stageVo.stages[0];
                getTask(state.stageList[0].projectStageId);
            }
        }
    })
}

/**
 * el-tree 节点被点击
 */
const nodeClick = (e) => {
    isLoading.value = true;
    getTask(e.projectStageId,()=>{
        isLoading.value = false;
    },()=>{
        isLoading.value = false;
    });
}

onMounted(() => {
    getStageDetail();
})
</script>
<style lang="scss" scoped>
@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

.title {
  height: 18px;
  font-size: 18px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  color: #1a1a1a;
}

.content {
  width: 100%;
  min-height: 504px;
  border-radius: 10px;

    .left-wrap{
        .stage-name{
            width: 314px;
            height: 40px;
            border-radius: 6px;
            border: 1px solid #E3E7F1;
            span{
                font-size: 14px;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #1A1A1A;
            }
        }
        .tree-wrap{
            margin-top: 10px;
            width: 314px;
            height: 576px;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 6px;
            border: 1px solid #E3E7F1;
            padding: 10px 10px;
        }
    }

    .right-wrap{
        margin-left: 40px;
        flex: 1;

        .stage-info-wrap{
            .state-icon{
                width: 20px;
                height: 20px;
            }

            .task-info-wrap{
                .line{
                    width: 1px;
                    height: 20px;
                    border: 1px solid #999999;
                    transform: scaleX(.1);
                    margin: 0 16px;
                }
                .title{
                    font-size: 14px;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #1A1A1A;
                }
                .be-overdue-title{
                    font-size: 14px;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #F12527;
                }
            }
        }
    }
}

.status-wrap{
    .status-item{
        .status-icon{
            width: 19px;
            height: 14px;
            border-radius: 5px;
        }
        .status-tip{
            font-size: 14px;
            font-family: SourceHanSansCN-Normal, SourceHanSansCN;
            font-weight: 400;
            color: #1A1A1A;
        }
    }
}
</style>